NewTab snippet example

When you click a TGML graphic that has a configured URL In Same Window snippet, another site or web application page opens in the same window.

This topic uses an example to illustrate how to configure a NewTab snippet.

Prerequisites:

This example uses a graphic file that already has a binded component or equipment in the workspace. For more information on how to prepare the TGML graphic snippet examples, see TGML snippet example prerequisites.

To create a NewTab snippet:

  1. In the Snippets pane, click NewTab from the list of snippets.

  2. Drag and drop the NewTab snippet over the selected component in the workspace and save it.

  3. In the bottom right corner, in the Objects pane, and click + to open the TGML.

    Two additional properties appear: Link and Script.

  4. Update the link with the TGML file to be opened. For example: test3


  5. Click Script.

  6. In the bottom right corner, click Properties, and then expand Behavior.
  7. Click the ellipsis next to OnMouseClick.

  8. Use the following script to configure the NewTab:
    9. Copy 
    function click(evt)
    {
    //componentName is name of the component based on the component selection we will fetch the component name
    var componentName = evt.getCurrentTarget().getAttribute("Name");

    //Collecting the links from the Component
    var Link = evt.getCurrentTarget().getElementsByTagName("Link");

    //title is component name use for showing the title
    var title = componentName;
        
    //customExpose-If two breakers are internally connected (means multi equipment);
    var customExpose = evt.getCurrentTarget().getAttribute("SubstituteNames");
    for (var i=0;i< Link.length;i++) {
        //LinkFileName : Extracting the file name from the Link
        var LinkFileName = Link.item(i).getAttribute("Name");
        //With invoke function you can configure the graphic component in Graphics Editor to open a linked target object in a target location when you perform a action(NewTab) on the component
        invoke(LinkFileName, "Type = NewTab | ComponentName=" + componentName + " | Title=" + title + " | CustomExpose=" + customExpose);
        }
    }

    function load(evt)
    {
    }
  9. Go to File > Save As > Project TGML.
  10. Enter a file name, and then click Save.

 

To view the snippet behavior:

  1. Log into PO Web Applications(https://localhost/webhmi or https://ipaddress/webhmi).

    2. The Power Operation Web Applications home page appears.

  2. Select the new TGML file from the Diagram Library.

  3. Click the breaker to open a NewTab from the component.

The NewTab screen is opened.